<html>
<head>
<title>CSS样式在线编辑器 - tool.webmasterhome.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/cssedit/css/css.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/cssedit/css/cssDesigner.css">
<script type="text/javascript" src="__PUBLIC__/Js/cssedit/js/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="__PUBLIC__/Js/cssedit/js/webmasterHome.js"></script>
<script language="JavaScript" type="text/javascript" src="__PUBLIC__/Js/cssedit/js/cssDesigner.js"></script>

<script src="__PUBLIC__/Admin/js/artDialog/artDialog.js"></script>
<script src="__PUBLIC__/Admin/js/artDialog/plugins/iframeTools.js"></script>
</head>
<style>
a{color:#333; text-decoration:none;}
ul,li{padding:0; margin:0; list-style-type:none;}
.TabList{margin-bottom:10px;}
.TabList li{display:inline;}
.TabList li a{display:inline-block; padding:5px 12px; padding-bottom:4px; border-bottom:3px solid #ccc;}
.TabList li.on a{border-bottom:3px solid #f60;}
.show{display:table !important;}
#cm_ select{width:100%; overflow:hidden; height:28px; line-height:28px; margin-bottom:4px;}
</style>

<script>
String.prototype.replaceAll = function(s1,s2){
　　return this.replace(new RegExp(s1,"gm"),s2);
　　}
//显示图片选择框
var mydialog = art.dialog;
function showImgBox(curElement){
	art.dialog.data('curElement',curElement);
	art.dialog.data('targetElement',document.getElementById("target"));
	
	art.dialog.open('{:U('Img/imagesBox')}', {width: 800, height: 500,lock:true,title:'选择图片'});
}


    $(document).ready(function(e) {
		setCssPage();
		//$($('#cssPath_value').val().replace('{id}','{$Think.get.modules_id}'), window.parent.document);
		//art.dialog.data('cssElement',));
		
        $('.TabList li').each(function(index, element) {
            $(this).click(function(e) {
                $('.TabList li').removeClass('on');
				$(this).addClass('on');
				$('.TableTab').removeClass('show');
				$('.TableTab').eq(index).addClass('show');
			});
        });
    });
	function setCssPage(){
		$($('#cssPath_value').val().replaceAll('{id}','{$Think.get.modules_id}'), window.parent.document).attr('style', $('#target').attr('style'));
	}
	
	
	
	
	function setTargetStyle(style, value){

	try{

		document.getElementById("target").style[QrXPCOM.cssToJsMap[style]] = value;
		setCssPage();
		document.getElementById("target2").style[QrXPCOM.cssToJsMap[style]] = value;

		document.getElementById("target3").style[QrXPCOM.cssToJsMap[style]] = value;

		styles[style] = value;

	}catch(e){

		document.getElementById("target").style[QrXPCOM.cssToJsMap[style]] = "";

		document.getElementById("target2").style[QrXPCOM.cssToJsMap[style]] = "";

		document.getElementById("target3").style[QrXPCOM.cssToJsMap[style]] = "";

		styles[style] = null;

	}

	

	var st;

	var cssstr = ".someclass {\n"; 

	for(st in styles){

		if(styles[st]) cssstr += "\t" + st + " : " + styles[st] + ";\n";

	}

	cssstr += "}\n";

	document.getElementById("output").value = cssstr;

	

	 

	var divstr = "<DIV style=\"";

	for(st in styles){

		if(styles[st]) divstr += st + ":" + styles[st] + "; ";

	}

	divstr += "\">\n\n</DIV>";

	document.getElementById("output2").value = divstr;
	
	
	//把样式写到页面上的元素中
	

}
</script>

<body bgcolor="#FFFFFF">
<div style="width:280px;height:260px; display:none;">
    <center>
      <h2>CSS 样式在线编辑器</h2>
    </center>
    <div style="background-image:url('/Public/Js/cssedit/images/grid.gif'); padding:20px; margin:20px; width:270px;">
     <div id="target" style="{$css}"> CSS 样式在线编辑器<br>
        <br>
        CSS 样式效果即时演示区域。 </div>
    </div>
    <TEXTAREA id="output" rows="7" style=" margin:20px; width:280px; border:1px solid gray;"></TEXTAREA>
    <br/>
  </div>
  <div style="width:280px;height:260px; display:none;">
    <div style="background-image:url('/Public/Js/cssedit/images/grid.gif'); padding:20px; margin:20px; width:270px;">
      <div id="target2"> CSS 样式在线编辑器<br/>
        <br/>
        CSS 样式效果即时演示区域。 </div>
    </div>
    <TEXTAREA id="output2" rows="7" style=" margin:20px; width:280px; border:1px solid gray;"></TEXTAREA>
    <br>
  </div>
  <div style="width:280px;height:260px; display:none;">
    <div style="background-image:url('/Public/Js/cssedit/images/grid.gif'); padding:20px; margin:20px; width:270px;">
      <div id="target3"> CSS 样式在线编辑器<br/>
        <br/>
        CSS 样式效果即时演示区域。 </div>
    </div>
    <TEXTAREA id="innerset" rows="7" style=" margin-top:20px;margin-left:20px;margin-right:20px; width:280px; border:1px solid gray;">请在此输入想要在效果演示中显示的内容，按确认键即可在上面演示区域查看效果。</TEXTAREA>
    <br>
    <p align="center">
      <input type="submit" class="submit" onClick="innerset();" value ="确认查看演示效果">
    </p>
  </div>
  
<script>
    var borderStyle = document.getElementById('target').style.borderStyle;
	var borderColor = document.getElementById('target').style.borderColor;
	var borderWidth = document.getElementById('target').style.borderWidth;
	
	
	function cssPathSubmit(){
		$('input[name="cssPath"]').remove();
		$('#cssPath_value').parent().submit();
	}
	
</script><form id="cm_" method="get">
<input type="hidden" name="cssPath" value="{$Think.get.cssPath}">



<select name="cssPath" id="cssPath_value" onChange="cssPathSubmit();">
<volist name="cssPathlist" id="vo">
    <option <if condition="$_GET['cssPath'] eq $vo">selected="selected"</if> value="{$vo}">{$vo}</option>
</volist>
</select>


<input name="cssPath" value="{$Think.get.cssPath}" style="width:100%; margin-bottom:4px;" type="text" />





<input type="hidden" name="modules_id" value="{$Think.get.modules_id}">
<select name="media" id="media_value" onChange="$(this).parent().submit();">
<option value="">分辨率</option>
<volist name="medialist" id="vo">
    <option <if condition="$_GET['media'] eq $vo">selected="selected"</if> value="{$vo}">{$vo}</option>
</volist>
</select></form>
<ul class="TabList">
     <li class="on"><a href="##">整体</a></li>
     <li><a href="##">定位</a></li>
     <li><a href="##">边框</a></li>
     <li><a href="##">字体</a></li>
     <li><a href="##">段落</a></li>
     <li><a href="##">背景</a></li>
</ul>


<!-- 整体 -->
<table border="0" cellpadding="1" cellspacing="1" class="show TableTab" style="display:none;">
<tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">整体宽度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.width.replace(/[A-Za-z]+/g,''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.width.replace(/\d+/g,''));

connectCSS2(pl,tan,"width");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">整体高度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.height.replace(/[A-Za-z]+/g,''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.height.replace(/\d+/g,''));

connectCSS2(pl,tan,"height");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">溢出选项：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.overflow);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("visible");

addItem("hidden");

addItem("scroll");

addItem("auto");

connectCSS(pl,"overflow");



</script></td>
  </tr>
  
  <tr>
    <td><img src="/Public/Js/cssedit/images/arrowclose.gif" id="padding#switch" onClick="collapseSwitch('padding');"></td>
    <td class="QrCSSDesignerPadLeft">内侧边距：</td>
    <td><span id="padding"><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.padding.replace(/[A-Za-z]+/g,''));

pl.render();

var override = new Array;

override["padding-top"]   = "";

override["padding-left"]   = "";

override["padding-right"]   = "";

override["padding-bottom"]   = "";

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.padding.replace(/\d+/g,'').split(' ')[0]);


connectCSS2(pl,tan,"padding",override);



</script></span></td>
  </tr>
  <tr id="padding-top" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上内边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[0].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[0].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[0].replace(/\d+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[0].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"padding-top");



</script></td>
  </tr>
  <tr id="padding-left" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">左内边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[3].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[1].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[3].replace(/\d+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[1].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"padding-left");



</script></td>
  </tr>
  <tr id="padding-right" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右内边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[1].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[1].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[1].replace(/\d+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[1].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"padding-right");



</script></td>
  </tr>
  <tr id="padding-bottom" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">底内边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[2].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[0].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.padding.split(' ').length == 4 ? document.getElementById('target').style.padding.split(' ')[2].replace(/\d+/g,'') : (document.getElementById('target').style.padding.split(' ').length == 2 ? document.getElementById('target').style.padding.split(' ')[1].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"padding-bottom");



</script></td>
  </tr>
  
  
  
  
  
  
  
  <tr>
    <td><img id="margin#switch" src="/Public/Js/cssedit/images/arrowclose.gif" onClick="collapseSwitch('margin');"></td>
    <td class="QrCSSDesignerPadLeft">外侧边距：</td>
    <td><span id="margin"><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.margin.replace(/[A-Za-z]+/g,'').split(' ')[0]);

pl.render();

var override = new Array;

override["margin-top"]   = "";

override["margin-left"]   = "";

override["margin-right"]   = "";

override["margin-bottom"]   = "";

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.margin.replace(/\d+/g,''));

connectCSS2(pl,tan,"margin",override);

</script></span></td>
  </tr>
  <tr id="margin-top" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上外边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[0].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[0].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[0].replace(/\d+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[0].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"margin-top");



</script></td>











  </tr>
  <tr id="margin-left" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">左外边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[3].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[1].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[3].replace(/\d+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[1].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"margin-left");



</script></td>
  </tr>
  <tr id="margin-right" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右外边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[1].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[1].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[1].replace(/\d+/g,'') : document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[1].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"margin-right");




</script></td>
  </tr>
  <tr id="margin-bottom" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">底外边距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[2].replace(/[A-Za-z]+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[0].replace(/[A-Za-z]+/g,'') : ''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.margin.split(' ').length == 4 ? document.getElementById('target').style.margin.split(' ')[2].replace(/\d+/g,'') : (document.getElementById('target').style.margin.split(' ').length == 2 ? document.getElementById('target').style.margin.split(' ')[0].replace(/\d+/g,'') : ''));

connectCSS2(pl,tan,"margin-bottom");



</script></td>
  </tr>
  
  
  
  
  
  
  
  
  
  
  
  <!-- 圆角 -->
  
  
    
  <tr>
    <td><img id="border-radius#switch" src="/Public/Js/cssedit/images/arrowclose.gif" onClick="collapseSwitch('border-radius');"></td>
    <td class="QrCSSDesignerPadLeft">圆角：</td>
    <td><span id="border-radius"><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderRadius.replace(/[A-Za-z]+/g,''));

pl.render();

var override = new Array;

override["border-top-left-radius"]   = "";

override["border-bottom-left-radius"]   = "";

override["border-top-right-radius"]   = "";

override["border-bottom-right-radius"]   = "";

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderRadius.replace(/\d+/g,''));

connectCSS2(pl,tan,"border-radius",override);

</script></span></td>
  </tr>
  <tr id="border-top-left-radius" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上左圆角：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[0].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[0].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-top-left-radius");



</script></td>











  </tr>
  <tr id="border-bottom-left-radius" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">下左圆角：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[3].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[3].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-bottom-left-radius");



</script></td>
  </tr>
  <tr id="border-top-right-radius" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右上圆角：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[1].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[1].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-top-right-radius");




</script></td>
  </tr>
  <tr id="border-bottom-right-radius" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右下圆角：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[2].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderRadius.split(' ').length == 4 ? document.getElementById('target').style.borderRadius.split(' ')[2].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-bottom-right-radius");



</script></td>
  </tr>
  
  
  
  
    <!-- 圆角end -->
  
  
  
  
  
  
  
  
  
  
  
  
<tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">显示属性：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.display);

pl.render();

function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("");

addItem("none");

addItem("block");

addItem("inline");
addItem("inline-block");
addItem("run-in");

addItem("compact");

addItem("list-item");

addItem("marker");

connectCSS(pl,"display");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">是否可见：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.visibility);

pl.render();

function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("");

addItem("visible");

addItem("hidden");

connectCSS(pl,"visibility");

</script></td>
  </tr></table>
  <!-- 整体end -->
  
  
  <!-- 定位 -->
  <table border="0" cellpadding="1" cellspacing="1" style="display:none;" class="TableTab">
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">资源定位：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.position);

pl.render();


function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("static");

addItem("relative");

addItem("absolute");

addItem("fixed");

connectCSS(pl,"position");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">距离顶部：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.top);

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent("px");

connectCSS2(pl,tan,"top");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">距离左边：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.left);

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent("px");

connectCSS2(pl,tan,"left");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">距离右边：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.right);

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent("px");

connectCSS2(pl,tan,"right");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">距离底边：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.bottom);

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent("px");

connectCSS2(pl,tan,"bottom");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">优先等级：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.zIndex);

pl.render();

connectCSS(pl,"z-index");

</script></td>
  </tr>
  
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">鼠标指针：</td>
    <td><script language="JavaScript" type="text/javascript">

<!--

var pl = new QrPulldown(document.getElementById('target').style.cursor);

pl.render();

function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("crosshair");

addItem("default");

addItem("hand");

addItem("pointer");

addItem("move");

addItem("text");

addItem("wait");

addItem("help");

addItem("n-resize");

addItem("s-resize");

addItem("w-resize");

addItem("e-resize");

addItem("ne-resize");

addItem("nw-resize");

addItem("se-resize");

addItem("sw-resize");

connectCSS(pl,"cursor");



</script></td>
  </tr>
</table>
<!-- 定位end -->


<!-- 边框 -->

<table border="0" cellpadding="1" cellspacing="1" style="display:none;" class="TableTab">
<tr>
    <td><img id="border-width#switch" src="/Public/Js/cssedit/images/arrowclose.gif" onClick="collapseSwitch('border-width');"></td>
    <td class="QrCSSDesignerPadLeft">边框宽度：</td>
    <td><span id="border-width"><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderWidth.replace(/[A-Za-z]+/g,''));

pl.render();

var override = new Array;

override["border-top-width"]   = "";

override["border-left-width"]   = "";

override["border-right-width"]   = "";

override["border-bottom-width"]   = "";

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderWidth.replace(/\d+/g,''));

connectCSS2(pl,tan,"border-width",override);

</script></span></td>
  </tr>
  <tr id="border-top-width" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上边宽度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderWidth.split(' ').length == 4 ? document.getElementById('target').style.borderWidth.split(' ')[0].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderWidth.split(' ').length == 4 ? document.getElementById('target').style.borderWidth.split(' ')[0].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-top-width");

</script></span></td>
  </tr>
  <tr id="border-left-width" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">左边宽度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderWidth.split(' ').length == 4 ? document.getElementById('target').style.borderWidth.split(' ')[3].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderTopWidth.split(' ').length == 4 ? document.getElementById('target').style.borderTopWidth.split(' ')[3].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-left-width");

</script></td>
  </tr>
  <tr id="border-right-width" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右边宽度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderWidth.split(' ').length == 4 ? document.getElementById('target').style.borderWidth.split(' ')[1].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderTopWidth.split(' ').length == 4 ? document.getElementById('target').style.borderTopWidth.split(' ')[1].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-right-width");

</script></td>
  </tr>
  <tr id="border-bottom-width" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">底边宽度：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.borderWidth.split(' ').length == 4 ? document.getElementById('target').style.borderWidth.split(' ')[2].replace(/[A-Za-z]+/g,'') : '');

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.borderTopWidth.split(' ').length == 4 ? document.getElementById('target').style.borderTopWidth.split(' ')[2].replace(/\d+/g,'') : '');

connectCSS2(pl,tan,"border-bottom-width");

</script></td>
  </tr>
  <tr>
    <td><img id="border-color#switch" src="/Public/Js/cssedit/images/arrowclose.gif" onClick="collapseSwitch('border-color');"></td>
    <td class="QrCSSDesignerPadLeft">边框颜色：</td>
    <td><span id="border-color"><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(document.getElementById('target').style.borderColor);

cp.render();

var override = new Array;

override["border-top-color"]   = "";

override["border-left-color"]   = "";

override["border-right-color"]   = "";

override["border-bottom-color"]   = "";

connectCSS(cp,"border-color",override);

</script></span></td>
  </tr>
  <tr id="border-top-color" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上边颜色：</td>
    <td><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(borderColor.split(' rgb').length == 4 ? borderColor.split(' rgb')[0] : "transparent");

cp.render();

connectCSS(cp,"border-top-color");

</script></td>
  </tr>
  <tr id="border-left-color" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">左边颜色：</td>
    <td><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(borderColor.split(' rgb').length == 4 ? 'rgb'+borderColor.split(' rgb')[3] : "transparent");

cp.render();

connectCSS(cp,"border-left-color");

</script></td>
  </tr>
  <tr id="border-right-color" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右边颜色：</td>
    <td><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(borderColor.split(' rgb').length == 4 ? 'rgb'+borderColor.split(' rgb')[1] : "transparent");

cp.render();

connectCSS(cp,"border-right-color");

</script></td>
  </tr>
  <tr id="border-bottom-color" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">底边颜色：</td>
    <td><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(borderColor.split(' rgb').length == 4 ? 'rgb'+borderColor.split(' rgb')[2] : "transparent");

cp.render();

connectCSS(cp,"border-bottom-color");

</script></td>
  </tr>
  <tr>
    <td><img id="border-style#switch" src="/Public/Js/cssedit/images/arrowclose.gif" onClick="collapseSwitch('border-style');"></td>
    <td class="QrCSSDesignerPadLeft">边框样式：</td>
    <td><span id="border-style"><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.borderStyle);

pl.render();



function addStyle(style){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:"+style+";border-color:red' align='middle'/> "+style,style);

}

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none","none");

addStyle("solid");

addStyle("double");

addStyle("groove");

addStyle("ridge");

addStyle("inset");

addStyle("outset");

addStyle("dashed");

addStyle("dotted");

var override = new Array;


override["border-top-style"]   = "";

override["border-left-style"]   = "";

override["border-right-style"]   = "";

override["border-bottom-style"]   = "";

connectCSS(pl,"border-style", override);





</script></span></td>
  </tr>
  <tr id="border-top-style" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">上边样式：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(borderStyle.split(' ').length == 4 ? borderStyle.split(' ')[0] : "solid");

pl.render();



function addStyle(style){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:"+style+";border-color:red' align='middle'/> "+style,style);

}

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none","none");

addStyle("solid");

addStyle("double");

addStyle("groove");

addStyle("ridge");

addStyle("inset");

addStyle("outset");

addStyle("dashed");

addStyle("dotted");

connectCSS(pl,"border-top-style");



</script></td>
  </tr>
  <tr id="border-left-style" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">左边样式：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(borderStyle.split(' ').length == 4 ? borderStyle.split(' ')[3] : "solid");

pl.render();



function addStyle(style){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:"+style+";border-color:red' align='middle'/> "+style,style);

}

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none","none");

addStyle("solid");

addStyle("double");

addStyle("groove");

addStyle("ridge");

addStyle("inset");

addStyle("outset");

addStyle("dashed");

addStyle("dotted");

connectCSS(pl,"border-left-style");



</script></td>
  </tr>
  <tr id="border-right-style" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">右边样式：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(borderStyle.split(' ').length == 4 ? borderStyle.split(' ')[1] : "solid");

pl.render();



function addStyle(style){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:"+style+";border-color:red' align='middle'/> "+style,style);

}

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none","none");

addStyle("solid");

addStyle("double");

addStyle("groove");

addStyle("ridge");

addStyle("inset");

addStyle("outset");

addStyle("dashed");

addStyle("dotted");

connectCSS(pl,"border-right-style");



</script></td>
  </tr>
  <tr id="border-bottom-style" style="display:none; ">
    <td></td>
    <td class="QrCSSDesignerPadLeft">底边样式：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(borderStyle.split(' ').length == 4 ? borderStyle.split(' ')[2] : "solid");

pl.render();



function addStyle(style){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:"+style+";border-color:red' align='middle'/> "+style,style);

}

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none","none");

addStyle("solid");

addStyle("double");

addStyle("groove");

addStyle("ridge");

addStyle("inset");

addStyle("outset");

addStyle("dashed");

addStyle("dotted");

connectCSS(pl,"border-bottom-style");



</script></td>
  </tr>
</table>


<!-- 边框END -->
<!-- 字体 -->
<table border="0" cellpadding="1" cellspacing="1" style="display:none;" class="TableTab">
<tr>
    <td width="20"></td>
    <td class="QrCSSDesignerPadLeft">字体颜色：</td>
    <td><script language="JavaScript" type="text/javascript">



var cp = new QrColorPicker(document.getElementById('target').style.color);

cp.render();

connectCSS(cp,"color");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">背景颜色：</td>
    <td><script language="JavaScript" type="text/javascript">

var cp = new QrColorPicker(document.getElementById('target').style.backgroundColor);

cp.render();

connectCSS(cp,"background-color");

</script></td>
  </tr>

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字字体：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.fontFamily);

pl.render();



function addFont(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> <span style='font-family:"+fontname+"'>"+fontname+"</span>",fontname);

}

addFont("serif");

addFont("sans-serif");

addFont("cursive");

addFont("fantasy");

addFont("monospace");

connectCSS(pl,"font-family");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字大小：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.fontSize);

pl.render();



function addFont(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> <span style='font-family:"+fontname+"'>"+fontname+"</span>",fontname);

}

addFont("9pt");

addFont("10pt");

addFont("12pt");

addFont("14pt");

addFont("16pt");

addFont("xx-small");

addFont("x-small");

addFont("small");

addFont("large");

addFont("x-large");

addFont("xx-large");

connectCSS(pl,"font-size");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字粗细：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.fontWeight);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("normal");

addItem("bold");

addItem("600");

addItem("900");

connectCSS(pl,"font-weight");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字样式：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.fontStyle);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("normal");

addItem("italic");

addItem("oblique");

connectCSS(pl,"font-style");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字变量：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.fontVariant);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("normal");

addItem("small-caps");

connectCSS(pl,"font-variant");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字行高：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.lineHeight.replace(/[A-Za-z]+/g,'').replace('%',''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.lineHeight.replace(/\d+/g,''));

connectCSS2(pl,tan,"line-height");

</script></td>
  </tr>
</table>

<!-- 字体END -->


<!-- 段落 -->
<table border="0" cellpadding="1" cellspacing="1" style="display:none;" class="TableTab">
<tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">清除属性：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.clear);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("left");

addItem("right");

addItem("both");

addItem("none");

connectCSS(pl,"clear");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">浮动属性：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.float);

pl.render();



function addItem(fontname){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+fontname,fontname);

}

addItem("left");

addItem("right");

addItem("none");

connectCSS(pl,"float");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">水平排列：</td>
    <td><script language="JavaScript" type="text/javascript">



var pl = new QrPulldown(document.getElementById('target').style.textAlign);

pl.render();



function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("left");

addItem("right");

addItem("center");

addItem("justify");

connectCSS(pl,"text-align");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文本修饰：</td>
    <td><script language="JavaScript" type="text/javascript">
//alert(document.getElementById('target').style.textDecoration);
var pl = new QrPulldown(document.getElementById('target').style.textDecoration);

pl.render();



function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("none");

addItem("underline");

addItem("overline");

addItem("underline overline");

addItem("line-through");

addItem("blink");

connectCSS(pl,"text-decoration");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文本缩进：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.textIndent.replace(/[A-Za-z]+/g,''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.textIndent.replace(/\d+/g,''));

connectCSS2(pl,tan,"text-indent");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文字间距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.letterSpacing.replace(/[A-Za-z]+/g,''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent(document.getElementById('target').style.letterSpacing.replace(/\d+/g,''));

connectCSS2(pl,tan,"letter-spacing");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">字母间距：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrSpinner(document.getElementById('target').style.wordSpacing.replace(/[A-Za-z]+/g,''));

pl.render();

</script><script language="JavaScript" type="text/javascript">

var tan = createTaniComponent("px");

connectCSS2(pl,tan,"word-spacing");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">文本转换：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.textTransform);

pl.render();

function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("none");

addItem("capitalize");

addItem("lowercase");

addItem("uppercase");

connectCSS(pl,"text-transform");

</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">垂直排列：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.verticalAlign);

pl.render();



function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("baseline");

addItem("top");

addItem("middle");

addItem("bottom");

addItem("text-top");

addItem("text-bottom");

addItem("super");

addItem("sub");

addItem("3em");

addItem("30%");

connectCSS(pl,"vertical-align");

</script></td>
  </tr>
</table>
<!-- 段落END -->

<!-- 背景 -->
<table border="0" cellpadding="1" cellspacing="1" style="display:none;" class="TableTab">
  
  
  
  
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">背景图片：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.backgroundImage.replace('("','(').replace('")',')'));

pl.render();

function addItem(item){
	
	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("点击选择图片");
addItem("");
connectCSS(pl,"background-image");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">背景拉伸：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.backgroundRepeat);

pl.render();

function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("repeat");

addItem("repeat-x");

addItem("repeat-y");

addItem("no-repeat");

connectCSS(pl,"background-repeat");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">背景定位：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.backgroundPosition);

pl.render();

function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("right top");
addItem("right bottom");
addItem("right center");

addItem("left top");
addItem("left bottom");
addItem("left center");

addItem("center top");
addItem("center bottom");
addItem("center center");

connectCSS(pl,"background-position");



</script></td>
  </tr>
  <tr>
    <td></td>
    <td class="QrCSSDesignerPadLeft">附加属性：</td>
    <td><script language="JavaScript" type="text/javascript">

var pl = new QrPulldown(document.getElementById('target').style.backgroundAttachment);

pl.render();



function addItem(item){

	pl.addItem("<img src='/Public/Js/cssedit/images/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> "+item,item);

}

addItem("fixed");

addItem("scroll");

connectCSS(pl,"background-attachment");



</script></td>
  </tr>
  
  
</table>

<!-- 背景 -->





<script>
    if(document.getElementById('target').style.padding.split(' ').length == 4 || document.getElementById('target').style.padding.split(' ').length == 2){
		document.getElementById('padding#switch').click();
	}
	if(document.getElementById('target').style.margin.split(' ').length == 4 || document.getElementById('target').style.margin.split(' ').length == 2){
		document.getElementById('margin#switch').click();
	}
	if(document.getElementById('target').style.borderWidth.split(' ').length == 4){
		document.getElementById('border-width#switch').click();
	}
	if(borderColor.split(' rgb').length == 4){
		document.getElementById('border-color#switch').click();
	}
	
	if(borderStyle.split(' ').length == 4){
		document.getElementById('border-style#switch').click();
	}
	
	 
	if(document.getElementById('target').style.borderRadius.split(' ').length == 4){
		document.getElementById('border-radius#switch').click();
	}
	
	
	
	
	
	
	
</script>


</body>
</html>